<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>基于Ajax灾区物资运输管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">受灾类型 - 数据统计</div>
                <div class="layui-card-body" style="min-height: 280px;">
                    <div class="layui-col-sm12" style="height: 280px;" id="disasterType"></div>
                </div>
            </div>
        </div>

        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">需求类型 - 数据统计</div>
                <div class="layui-card-body" style="min-height: 280px;" id="demandType"></div>
            </div>
        </div>

        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">全国救灾物资 - 数据统计</div>
                <div class="layui-card-body" id="chinaMaterialsType" style="height: 600px;"></div>
            </div>
        </div>
    </div>

</div>
</body>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script type="text/javascript" src="../js/china.js"></script>
<script>
    // 基于准备好的dom，初始化echarts实例
    var disasterType = echarts.init(document.getElementById('disasterType'));

    // 受灾数据统计 - 饼图
    $.ajax({
        url: './manage/queryDisasterType',
        type: 'post',
        dataType: 'json',
        success: disasterTypeFunc
    })

    // 受灾数据回调函数
    function disasterTypeFunc(res) {
        let type_data = [];
        let value_data = [];
        $.each(res.data, function(i, v) {
            type_data.push(v.disasterType);
            value_data.push({
                name: v.disasterType,
                value: v.disasterCount
            })
        });

        // 指定图表的配置项和数据
        let option = {
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                left: 'left',
                data: type_data
            },
            series : [
                {
                    name: '消费来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data: value_data,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        disasterType.setOption(option);
    }

    // 基于准备好的dom，初始化echarts实例
    var demandType = echarts.init(document.getElementById('demandType'));

    // 需求类型数据统计 - 柱状图
    $.ajax({
       url: './manage/queryDemandType',
       type: 'post',
       dataType: 'json',
       success: demandTypeFunc
    });

    // 需求类型数据回调函数
    function demandTypeFunc(res) {
        let type_data = [];
        let value_data = [];
        $.each(res.data, function(i, v) {
            type_data.push(v.demandType);
            value_data.push(v.demandCount);
        });
        let dataShadow = [];
        let yMax = Math.max(...value_data);
        for (let i = 0; i < value_data.length; i++) {
            dataShadow.push(yMax);
        }

        // 指定图表的配置项和数据
        let option = {
            title: {
                text: '物资需求类型数据图',
                subtext: ''
            },
            xAxis: {
                data: type_data,
                axisLabel: {
                    inside: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                z: 10
            },
            yAxis: {
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#999'
                    }
                }
            },
            dataZoom: [
                {
                    type: 'inside'
                }
            ],
            series: [
                { // For shadow
                    type: 'bar',
                    itemStyle: {
                        color: 'rgba(0,0,0,0.05)'
                    },
                    barGap: '-100%',
                    barCategoryGap: '40%',
                    data: dataShadow,
                    animation: false
                },
                {
                    type: 'bar',
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#83bff6'},
                                {offset: 0.5, color: '#188df0'},
                                {offset: 1, color: '#188df0'}
                            ]
                        )
                    },
                    emphasis: {
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#2378f7'},
                                    {offset: 0.7, color: '#2378f7'},
                                    {offset: 1, color: '#83bff6'}
                                ]
                            )
                        }
                    },
                    data: value_data
                }
            ]
        };
        demandType.setOption(option);
    }

    // 全国救灾物资 - 中国地图
    var chinaMaterialsType = echarts.init(document.getElementById("chinaMaterialsType"));
    function randomValue() {
        return Math.round(Math.random()*1000);
    }
    var dataList=[
        {name:"南海诸岛",value:0},
        {name: '北京', value: randomValue()},
        {name: '天津', value: randomValue()},
        {name: '上海', value: randomValue()},
        {name: '重庆', value: randomValue()},
        {name: '河北', value: randomValue()},
        {name: '河南', value: randomValue()},
        {name: '云南', value: randomValue()},
        {name: '辽宁', value: randomValue()},
        {name: '黑龙江', value: randomValue()},
        {name: '湖南', value: randomValue()},
        {name: '安徽', value: randomValue()},
        {name: '山东', value: randomValue()},
        {name: '新疆', value: randomValue()},
        {name: '江苏', value: randomValue()},
        {name: '浙江', value: randomValue()},
        {name: '江西', value: randomValue()},
        {name: '湖北', value: randomValue()},
        {name: '广西', value: randomValue()},
        {name: '甘肃', value: randomValue()},
        {name: '山西', value: randomValue()},
        {name: '内蒙古', value: randomValue()},
        {name: '陕西', value: randomValue()},
        {name: '吉林', value: randomValue()},
        {name: '福建', value: randomValue()},
        {name: '贵州', value: randomValue()},
        {name: '广东', value: randomValue()},
        {name: '青海', value: randomValue()},
        {name: '西藏', value: randomValue()},
        {name: '四川', value: randomValue()},
        {name: '宁夏', value: randomValue()},
        {name: '海南', value: randomValue()},
        {name: '台湾', value: randomValue()},
        {name: '香港', value: randomValue()},
        {name: '澳门', value: randomValue()}
    ]
    let optionChinaMaterialsType = {
        tooltip: {
            formatter: function(params, ticket, callback) {
                return params.seriesName + '<br />' + params.name + '：' + params.value
            }
        },
        visualMap: {
            min: 0,
            max: 1500,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            inRange: {
                color: ['#e0ffff', '#006edd']
            },
            show: true
        },
        geo: {
            map: 'china',
            roam: false,
            zoom: 1.23,
            label: {
                normal: {
                    show: true,
                    fontSize: '10',
                    color: 'rgba(0,0,0,0.7)'
                }
            },
            itemStyle: {
                normal: {
                    borderColor: 'rgba(0, 0, 0, 0.2)'
                },
                emphasis: {
                    areaColor: '#F3B329',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        },
        series: [{
            name: '信息量',
            type: 'map',
            geoIndex: 0,
            data: dataList
        }]
    };
    chinaMaterialsType.setOption(optionChinaMaterialsType);
    chinaMaterialsType.on('click', function (params) {
        alert(params.name);
    });
</script>
</html>
